
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<!--     <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
<!--     <meta http-equiv="X-UA-Compatible" content="ie=edge"> -->
<title>Product Admin</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<!--     <link rel="stylesheet" href="css/commonality.css"> -->
<link rel="stylesheet" href="css/viewcss/index.css">
<link rel="stylesheet" href="iconfont/iconfont.css">
<link rel="stylesheet" href="iconfonts/iconfont.css">
<link rel="stylesheet" href="css/fullcalendar.css">
<link rel="stylesheet" href="css/fullcalendar.print.css" media='print'>
<link rel='stylesheet' href='css/scheduler.css' />
<link rel='stylesheet' href='css/bootstrap-datetimepicker.min.css' />
<link rel='stylesheet' href='css/toastr.min.css' />

<script src="iconfont/iconfont.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/tooplate-scripts.js"></script>
<script src="js/router/route.js"></script>
<script src="js/router/router.js"></script>
<script src="js/fullcalendar.js"></script>
<script src="js/zh-cn.js"></script>
<script src="js/scheduler.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"
	charset="UTF-8"></script>
<script type="text/javascript"
	src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script src="iconfonts/iconfont.js"></script>
<script src='js/toastr.min.js'></script>
<script>

    </script>

</head>

<body>


	<div class="post-ca-table">
		<div id='calendar'></div>
	</div>

	<div class="container-fluid mt-5" id="body_container">
		<div class="row">
			<div class="col">
				<div id='calendar'></div>
			</div>
		</div>
	</div>

	<!-- Modal -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"
		aria-labelledby="exampleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="exampleModalLabel">新增布岗</h4>
				</div>

				<div class="modal-body">
					<form class="form-horizontal">

						<div class="form-group">
							<label for="start_time" class="col-md-2 control-label">起始时间</label>
							<div class="input-group date form_datetime col-md-10"
								data-date="" data-date-format="yyyy-mm-dd hh:mm:ss"
								data-link-field="start_time" data-whatever='@time'>
								<input class="form-control" id="start_time" size="16"
									type="text" value="" readonly> <span
									class="input-group-addon"><span
									class="glyphicon glyphicon-remove"></span></span> <span
									class="input-group-addon"><span
									class="glyphicon glyphicon-time"></span></span>
							</div>
							<!-- <input type="hidden" id="start_time" value="" /><br /> -->
						</div>

						<div class="form-group">
							<label for="end_time" class="col-md-2 control-label">结束时间</label>
							<div class="input-group date form_datetime col-md-10"
								data-date="" data-date-format="yyyy-mm-dd hh:mm:ss"
								data-link-field="end_time">
								<input class="form-control" id="end_time" size="16" type="text"
									value="" readonly> <span class="input-group-addon"><span
									class="glyphicon glyphicon-remove"></span></span> <span
									class="input-group-addon"><span
									class="glyphicon glyphicon-time"></span></span>
							</div>
							<!-- <input type="hidden" id="end_time" value="" /><br /> -->
						</div>

						<div class="form-group dropdown" id="dropdown">
							<label for="post" class="col-sm-2 control-label">岗位选择</label>
							<div class="col-sm-10">
								<button type="button" id="postSelectBtn"
									class="btn btn-default dropdown-toggle form-control"
									data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="false">
									<span class="postSelectBtnText">点击选择</span> <span class="caret"></span>
								</button>
								<ul class="cus-select post-select dropdown-menu">
									<li><a href="#" resourceId='505301' value="0705001">值班站长
											日班</a></li>
									<li><a href="#" resourceId='505302' value="0705001">值班站长
											夜班</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" resourceId='505303' value="0705002">行车值班员
											日班</a></li>
									<li><a href="#" resourceId='505304' value="0705002">行车值班员
											夜班</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" resourceId='505305' value="0705003">设备值班员
											日班</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" resourceId='505306' value="0705004">站厅巡视岗
											早班</a></li>
									<li><a href="#" resourceId='505307' value="0705004">站厅巡视岗
											中班</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" resourceId='505308' value="0705005">巡视岗站务员(机动)
											早班</a></li>
									<li><a href="#" resourceId='505309' value="0705005">巡视岗站务员(机动)
											中班</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" resourceId='505310' value="0705006">上行站台岗
											早班</a></li>
									<li><a href="#" resourceId='505311' value="0705006">上行站台岗
											中班</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" resourceId='505312' value="0705007">下行站台岗
											早班</a></li>
									<li><a href="#" resourceId='505313' value="0705007">下行站台岗
											中班</a></li>
								</ul>
							</div>
						</div>

						<div class="form-group dropdown" id="dropdown">
							<label for="post-id" class="col-sm-2 control-label">岗点</label>
							<div class="col-sm-10">
								<button type="button" id="postIdSelectBtn"
									class="btn btn-default dropdown-toggle form-control"
									data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="false">
									<span class="postIdSelectBtnText">点击选择</span> <span
										class="caret"></span>
								</button>
								<ul class="cus-select post-id-select dropdown-menu">
									<li><a href="#" value="0705001">值班站长</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705002">行车值班员</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705003">设备值班员</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705004">站厅岗</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705005">上行站台岗</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705006">下行站台岗</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705007">休息岗</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705008">消防志愿者</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705009">增援站务员1</a></li>
									<li><a href="#" value="0705010">增援站务员2</a></li>
									<li><a href="#" value="0705011">增援站务员3</a></li>
									<li><a href="#" value="0705012">增援站务员4</a></li>
									<li><a href="#" value="0705013">增援站务员5</a></li>
									<li><a href="#" value="0705014">增援站务员6</a></li>
									<li><a href="#" value="0705015">增援站务员7</a></li>
									<li><a href="#" value="0705016">增援站务员8</a></li>
									<li><a href="#" value="0705017">增援站务员9</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705018">保洁员A</a></li>
									<li><a href="#" value="0705019">保洁员B</a></li>
									<li><a href="#" value="0705020">保洁员C</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705021">当班民警</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705022">增援民警A</a></li>
									<li><a href="#" value="0705023">增援民警B</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705024">保安员A</a></li>
									<li><a href="#" value="0705025">保安员B</a></li>
									<li><a href="#" value="0705026">保安员C</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705027">北厅安检A</a></li>
									<li><a href="#" value="0705028">北厅安检B</a></li>
									<li><a href="#" value="0705029">北厅安检C</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705030">南厅安检D</a></li>
									<li><a href="#" value="0705031">南厅安检E</a></li>
									<li><a href="#" value="0705032">南厅安检F</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705033">志愿者1</a></li>
									<li><a href="#" value="0705034">志愿者2</a></li>
									<li><a href="#" value="0705035">志愿者3</a></li>
									<li><a href="#" value="0705036">志愿者4</a></li>
									<li><a href="#" value="0705037">志愿者5</a></li>
									<li><a href="#" value="0705038">志愿者6</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705039">地方民警A</a></li>
									<li><a href="#" value="0705040">地方民警B</a></li>
									<li><a href="#" value="0705041">地方民警C</a></li>
								</ul>
							</div>
						</div>

						<div class="form-group dropdown" id="dropdown">
							<label for="area" class="col-sm-2 control-label">区域</label>
							<div class="col-sm-10">
								<button type="button" id="areaSelectBtn"
									class="btn btn-default dropdown-toggle form-control"
									data-toggle="dropdown" aria-haspopup="true"
									aria-expanded="false">
									<span class="areaSelectBtnText">点击选择</span> <span class="caret"></span>
								</button>
								<ul class="cus-select area-select dropdown-menu">
									<li><a href="#" value="0705000">全站</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705001">1号口</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705002">北厅自助售票厅</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705003">3号口</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705004">南厅自助售票区</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705005">5号口</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705006">工作区域</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705007">站厅付费区</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705008">出站闸机非付费区</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705009">上行站台</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#" value="0705010">下行站台</a></li>
								</ul>
							</div>
						</div>

					</form>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary postBtn">保存</button>
				</div>
			</div>
		</div>


	</div>

</body>

<script>
$(function () { // document ready

	var currentDate = moment(new Date()).format('YYYY-MM-DD');
	
	//弹出框
	toastr.options = {  
		  closeButton: true,  
          debug: false,  
          progressBar: true,  
          positionClass: "toast-top-center",  
          onclick: null,  
          showDuration: "300",  
          hideDuration: "1000",  
          timeOut: "2000",  
          extendedTimeOut: "1000",  
          showEasing: "swing",  
          hideEasing: "linear",  
          showMethod: "fadeIn",  
          hideMethod: "fadeOut"  
     }; 

	$('#calendar').fullCalendar({
		customButtons: {
			addEventButton: {
				text: '新增布岗',

				click: function () {
					$('#addModal').modal('toggle');   //打开模态框
				}
			}
		},
		now: currentDate,
		editable: true,
		aspectRatio: 1.8,
		scrollTime: '00:00',
		duration: { hours: 0.5 },
		contentHeight: 454,
		header: {
			left: 'today prev,next, addEventButton',
			center: 'title',
			right: 'timelineDay'  //timelineDay
		},
		defaultView: 'timelineDay',
		schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',  //scheduler 商业项目许可证  (须开源)
		views: {
			timelineThreeDays: {
				type: 'timeline',
				duration: { days: 3 }
			}
		},
		resourceAreaWidth: '30%',
		resourceColumns: [
			{
				// group: true,
				labelText: '岗位',
				field: 'building'
			},
			{
				labelText: '班种',
				field: 'class'
			},
			{
				labelText: '班次',
				field: 'shift_id'
			}

		],
		eventOverlap: false, // will cause the event to take up entire resource height
		resources: [
			{ id: '505301', building: '值班站长', class: '大四班', shift_id: '日班' },
			{ id: '505302', building: '值班站长', class: '大四班', shift_id: '夜班' },
			{ id: '505303', building: '行车值班员', class: '大四班', shift_id: '日班' },
			{ id: '505304', building: '行车值班员', class: '大四班', shift_id: '夜班' },
			{ id: '505305', building: '设备值班员', class: '做一休一', shift_id: '日班' },
			{ id: '505306', building: '站厅巡视岗', class: '早中班', shift_id: '早班' },
			{ id: '505307', building: '站厅巡视岗', class: '早中班', shift_id: '中班' },
			{ id: '505308', building: '巡视岗站务员(机动)', class: '早中班', shift_id: '早班' },
			{ id: '505309', building: '巡视岗站务员(机动)', class: '早中班', shift_id: '中班' },
			{ id: '505310', building: '上行站台岗', class: '早中班', shift_id: '早班' },
			{ id: '505311', building: '上行站台岗', class: '早中班', shift_id: '中班' },
			{ id: '505312', building: '下行站台岗', class: '大四班', shift_id: '日班' },
			{ id: '505313', building: '下行站台岗', class: '大四班', shift_id: '晚班' },
			// { id: 'g', building: '上行站台岗', class: '早中班', children: [
			// 	{ id: 'g1', class: '早班' },
			// 	{ id: 'g2', class: '中班' }
			// ]},
		],
		events: function (start, end, timezone, callback) {
			$.ajax({
				url: 'http://127.0.0.1:10016/post/renderPostEvent',
				type: 'GET',
				data: {
					start: start._d.toISOString().substr(0, 10),
					// end: end._i
				},
				success: function (data) {

					if (data.code == 'success') {
						var events = [];
						if (data.data && data.data.length != 0) {
							data.data.forEach(function (element) {
								events.push({
									title: element.title,
									id: element.id,
									resourceId: element.resourceId,
									start: element.start,
									end: element.end,
									post: element.post,
									postValue: element.postValue,
									postId: element.postId,
									postIdValue: element.postIdValue,
									area: element.area,
									areaValue: element.areaValue,
								})
							});
						}

						callback(events);

					} else {
						toastr[data.code](data.message);
					}


				}
			});
		},

		eventRender: function (event, element) {
			element.attr('role', 'button');
			element.attr('tabindex', 0);
			element.attr('data-toggle', 'popover')
			element.popover({
				container: 'body',  //操作弹出框附加在哪个元素上  选择body 不会导致在边界打开弹出框将元素挤变形
				trigger: 'manual',  //触发方式 manual
				placement: 'bottom', //top, bottom, left or right   弹出框弹出位置
				title: '操作',
				html: 'true',    //允许content 使用html
				content: "<div><button type='button' class='btn btn-default' onclick='editPostData()' data-toggle='modal' data-target='#addModal' data-whatever='@edit'>查看</button></div><div><button type='button' class='btn btn-default' onclick='eventDel()'>删除</button></div>",   //可以str 也可以 function()返回html str
			})
		},

		eventClick: function (calEvent, jsEvent, view) {

			var a = $('#calendar').fullCalendar('getEventResource', calEvent);

			postData = renderPostData(calEvent);
			postData.start = calEvent.start._i;
			postData.end = calEvent.end._i;
			
			if (!eventTemp) {
				// $(this).popover("show");
				var element = $(this);
				var txt = element.html();
			}
		},

		eventDrop: function (event, delta, revertFunc, jsEvent, ui, view) {
			postData = renderPostData(event);

			postData.start = moment(event.start._i).add(delta._milliseconds,'milliseconds').format('YYYY-MM-DD HH:mm:ss');
			postData.end = moment(event.end._i).add(delta._milliseconds,'milliseconds').format('YYYY-MM-DD HH:mm:ss');

			eventDataUpdate(postData);
		},

		// 修改 fullcalendar.js reportEventResize()方法的返回对象 delta
		eventResize: function (event, delta,revertFunc, jsEvent, ui, view) {
			
			postData = renderPostData(event);
			
			if(delta.dateDelta._milliseconds){
				postData.start = moment(event.start._i).add(delta.dateDelta._milliseconds,'milliseconds').format('YYYY-MM-DD HH:mm:ss');
				postData.end = event.end._i;
			}else{
				postData.start = event.start._i;
				postData.end = moment(event.end._i).add(delta.durationDelta._milliseconds,'milliseconds').format('YYYY-MM-DD HH:mm:ss');
			}

			eventDataUpdate(postData);
		},
	});

});

var eventTemp;  //事件点击
var eventData;

var postData = {
	id: '',
	resourceId: '',
	start: '',    //开始时间
	end: '',      //结束时间
	post: '',     //岗位
	postValue: '',
	area: '',     //区域
	areaValue: '',
	postId: '',   //岗点
	postIdValue: ''
}

function alertJss(){
	toastr["warning"]("你有新消息了!");  
}


//event 弹出操作框点击事件监听
$("body").on("click", function (event) {
	var target = $(event.target);

	if (!target.hasClass('fc-title')            //如果点击的不是 event 中的dom元素 就关闭操作弹出框
		&& !target.parent().hasClass('fc-event')
		&& !target.hasClass('fc-event')) {
		$('.fc-event').popover('hide');
		eventTemp = null;
	} else {
		var c = target[0].tagName.toLowerCase();  //拿到当前选中的event 去和上次点击的event对比 
		var event;
		if (c == 'span') {
			event = target.parent().parent();
		} else {
			event = target.parent();
		}
		if (eventTemp) {
			if (event.attr('aria-describedby') == eventTemp.attr('aria-describedby')) {
				$(eventTemp).popover('hide');    //和上次点击的相同 则关闭此event
				eventTemp = null;
			} else {
				$(eventTemp).popover('hide');   //不同也关闭此event 再打开当前点击的event
				$(event).popover('show');
				eventTemp = event;
			}
		} else {
			$(event).popover('show');             //不存在上次点击的event 则直接打开此event弹出操作框
			eventTemp = event;
		}
	}
});

//时间选择插件
$('.form_datetime').datetimepicker({
	weekStart: 1,
	todayBtn: 1,
	autoclose: 1,
	todayHighlight: 1,
	startView: 2,
	forceParse: 0,
	language: 'zh-CN',
	showMeridian: 1
});



//dropdown 组件下拉框选中传值
//根据选中替换显示的文字 并获取其value
$(".post-select a").on("click", function (event) {
	var target = $(event.target);
	postData.postValue = target.attr('value');
	postData.resourceId = target.attr('resourceId');
	postData.post = target.html();
	$('.postSelectBtnText').text(target.html());
});

$(".area-select a").on("click", function (event) {
	var target = $(event.target);
	postData.areaValue = target.attr('value');
	postData.area = target.html();
	$('.areaSelectBtnText').text(target.html());
});

$(".post-id-select a").on("click", function (event) {
	var target = $(event.target);
	postData.postIdValue = target.attr('value');
	postData.postId = target.html();
	$('.postIdSelectBtnText').text(target.html());
});

$(".postBtn").on("click", function (event) {
	var target = $(event.target);
	var type = target.attr('id');
	if (type == 'post-submit') {
		Post_Event_Add()
	} else {
		Post_Event_Edit()
	}
});

function Post_Event_Add() {
	postData.start = $('#start_time').val();
	postData.end = $('#end_time').val();
	if (postData.end < postData.start) {
		toastr["warning"]("时间选择异常，结束时间早于开始时间！");  
		return;
	}
	postData.title = postData.start + '-' + postData.end + ' ' + postData.postId + ' 区域：' + postData.area;
	$.ajax({
		url: 'http://127.0.0.1:10016/post/addPostEvent',
		data: postData,
		type: 'POST',
		dataType: 'json',
		success: function (data) {
			if (data.code == 'success') {
				// planScheduInfos = data.data;
				$('#calendar').fullCalendar('refetchEvents'); //重新获取event数据
				toastr[data.code](data.message);
				$('#addModal').modal('hide');
			} else {
				toastr[data.code](data.message);
			}

		}
	});

	var source = [postData];
}

function Post_Event_Edit() {
	postData.start = $('#start_time').val();
	postData.end = $('#end_time').val();
	if (postData.end < postData.start) {
		toastr['warning']("时间选择异常，结束时间早于开始时间！");
		return;
	}
	
	eventDataUpdate(postData);
	var source = [postData];
	// $('#calendar').fullCalendar('addEventSource', source);
}

//清空表单数据
$('.modal').on('hidden.bs.modal', function () {
	$('#start_time').val('');
	$('#end_time').val('');
	$('.postIdSelectBtnText').text("点击选择");
	$('.areaSelectBtnText').text("点击选择");
	$('.postSelectBtnText').text("点击选择");
	postData = {};
});


$('.modal').on('show.bs.modal', function (event) {
	var recipient = $(event.relatedTarget).data('whatever');
	var modal = $(this)
	if (recipient) {
		modal.find('.modal-title').text('查看布岗');
		$('#start_time').val(postData.start);
		$('#end_time').val(postData.end);
		$('.postIdSelectBtnText').text(postData.postId);
		$('.areaSelectBtnText').text(postData.area);
		$('.postSelectBtnText').text(postData.post);

		$('.postBtn').attr('id', 'post-edit');
	} else {
		modal.find('.modal-title').text('新增布岗');
		$('.postBtn').attr('id', 'post-submit');
	}

})



function editPostData() {
	// $('.modal').modal('show')
}

function eventDel() {
	$.ajax({
		url: 'http://127.0.0.1:10016/post/delPostEvent',
		data: {
			pid: postData.id
		},
		type: 'POST',
		dataType: 'json',
		success: function (data) {
			if (data.code == 'success') {
				// planScheduInfos = data.data;
				$('#calendar').fullCalendar('refetchEvents'); //重新获取event数据
				toastr[data.code](data.message);
			} else {
				toastr[data.code](data.message);
			}
		}
	});
}

function renderPostData(event){
	postData = {
		id: event.id,
		resourceId: event.resourceId,
		// start: calEvent.start._i,    //开始时间
		// end: calEvent.end._i,      //结束时间
		post: event.post,     //岗位
		postValue: event.postValue,
		area: event.area,     //区域
		areaValue: event.areaValue,
		postId: event.postId,   //岗点
		postIdValue: event.postIdValue
	}
	return postData;
}

function eventDataUpdate(postData){
	postData.title = postData.start + '-' + postData.end + ' ' + postData.postId + ' 区域：' + postData.area;
	$.ajax({
		url: 'http://127.0.0.1:10016/post/updatePostEvent',
		data: postData,
		type: 'POST',
		dataType: 'json',
		success: function (data) {
			if (data.code == 'success') {
				// planScheduInfos = data.data;
				$('#calendar').fullCalendar('refetchEvents'); //重新获取event数据
				toastr[data.code](data.message);
				$('#addModal').modal('hide');
			} else {
				toastr[data.code](data.message);
			}

		}
	});
}
</script>

<style>
body {
	background-color: rgb(9, 46, 65);
}

.post-ca-table {
	
}

#calendar {
	max-width: 1280px;
	margin: 0 auto;
}

.cus-select.dropdown-menu {
	left: unset;
	width: 94%;
	height: 250px;
	overflow-y: scroll;
}

.cus-select.dropdown-menu li {
	text-align: center;
}

.popover .btn {
	/* display: block; */
	width: 80px;
	margin-top: 6px;
}

.popover .popover-title {
	text-align: center;
}

.fc-no-overlap .fc-body .fc-resource-area .fc-cell-content {
	text-align: center;
}

.fc-timeline .fc-head .fc-cell-content {
	text-align: center
}

.post-ca-table {
	margin-top: 100px;
}

.post-ca-table table {
	table-layout: fixed;
}

.fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody,
	.fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-content,
	/* for gutter border */ .fc-unthemed .fc-popover, .fc-unthemed .fc-list-view,
	.fc-unthemed .fc-list-heading td {
	border-color: #32b1dd;
}

.fc-cell-text {
	color: #54c3f1;
}

.fc-center {
	color: #54c3f1;
}

/* 	.ca-table { */
/* 	width: 63%; */
/* 	margin-bottom: 2%; */
/* } */

/* .center-block { */
/* 	display: block; */
/*     margin-left: auto; */
/*     margin-right: auto; */
/* } */
</style>

</html>